<!DOCTYPE html>
<html>
<head>
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<script src='../../../fast/forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#AD4883'>
<script>
'use strict';

let t = async_test('Color picker: Manually entering an invalid value should not change the selected color.');
t.step(() => {
  let colorControl = document.getElementById('color');
  openPicker(colorControl, t.step_func_done(() => {
    popupWindow.focus();
    const popupDocument = popupWindow.document;
    const gValueContainer = popupDocument.getElementById('gValueContainer');
    assert_equals(gValueContainer.value, '72');
    const gValueContainerRect = gValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(gValueContainerRect.left + 1, gValueContainerRect.top);
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowLeft');
    eventSender.keyDown('3');
    assert_equals(gValueContainer.value, '372');
    eventSender.keyDown('Tab');
    assert_equals(gValueContainer.value, '72', 'Invalid value should be reset when the value container is blurred.');

    const formatToggler = popupDocument.querySelector('format-toggler');
    formatToggler.click();
    const sValueContainer = popupDocument.getElementById('sValueContainer');
    assert_equals(sValueContainer.value, '41%');
    const sValueContainerRect = sValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(sValueContainerRect.right - 1, sValueContainerRect.top + (sValueContainerRect.height / 2));
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowRight');
    eventSender.keyDown('Backspace');
    assert_equals(sValueContainer.value, '41');
    eventSender.keyDown('Tab');
    assert_equals(sValueContainer.value, '41%', 'Invalid value should be reset when the value container is blurred.');

    formatToggler.click();
    const hexValueContainer = popupDocument.getElementById('hexValueContainer');
    assert_equals(hexValueContainer.value, '#ad4883');
    const hexValueContainerRect = hexValueContainer.getBoundingClientRect();
    eventSender.mouseMoveTo(hexValueContainerRect.right - 1, hexValueContainerRect.top + (hexValueContainerRect.height / 2));
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.keyDown('ArrowRight');
    const hexValueContainerLength = hexValueContainer.value.length;
    for (let i = 0; i < hexValueContainerLength; i++) {
      eventSender.keyDown('Backspace');
    }
    assert_equals(hexValueContainer.value, '');
    eventSender.keyDown('Tab');
    assert_equals(hexValueContainer.value, '#00000a', 'Invalid value should be reset when the value container is blurred.');
  }));
});
</script>
</body>
</html>
